<template>
  <content-field>
    <n-card>
      <n-list hoverable clickable>
        <template #header>
          合集列表
          <n-statistic label="总计合集" :value="count">
            <template #suffix> / ∞ </template></n-statistic
          >
        </template>
        <n-list-item
          v-for="collection of collectionlist"
          :key="collection.id"
          @click="to_collection_article(collection.id)"
          >{{ collection.name }}</n-list-item
        >
      </n-list>
    </n-card>
  </content-field>
</template>

<script>
import ContentField from "@/components/ContentField.vue";
import { NList, NListItem } from "naive-ui";
import remoteData from "@/composables/RemoteData";
import { ref } from "@vue/reactivity";
import routerJump from "@/composables/RouterJump";
export default {
  components: { ContentField, NList, NListItem },
  setup() {
    const { get_collecions } = remoteData(null);
    const { to_collection_article } = routerJump();

    const collectionlist = ref([]);
    const count = ref(0);

    get_collecions(1, collectionlist, count).catch((error) => {
      console.log(error);
    });

    return {
      collectionlist,
      count,
      get_collecions,
      to_collection_article,
    };
  },
};
</script>

<style>
</style>